<template>
	<view>
	  <view class="head">
	    <view class="select-bottom">
	      <view class="select-wrap">
			  <!-- <keep-alive> -->
				 <my-select :options="classes" mykey="class_id" text="class_name" @change="change($event)"></my-select>
			  <!-- </keep-alive> -->
		  </view>
	      <input placeholder="请输入学生姓名" class="head-input" v-model="searchValue.value"></input>
	      <button class="head-button" type="primary" style="width:180rpx; margin-left:12rpx; height: 72rpx;" @click="clickSearch">搜索</button>
	    </view>
	  </view>
	  <scroll-view 
	  :style="'height:'+ scrollViewHeight +'px'" 
	  scroll-y="true" 
	  @scrolltolower="lower" 
	  scroll-into-view="toView" 
	  scroll-top="scrollTop" 
	  enable-back-to-top="true"
	  class="scroll-view">
	          <view class="scroll-view-item table-total">
	            <view>总订单数:{{data1.total.cnt}}</view>
	            <view>总金额:{{data1.total.money == null ?'0':data1.total.money}}</view>
	          </view>
	          <view class="scroll-view-item table-head">
	            <view>订单编号</view>
	            <view>{{tableInfo.lineTitle}}</view>
	            <view>金额</view>
	          </view>
	          <view class="scroll-view-item" v-for="(item) in data1.booking_order" :data-sn="item.order_sn" @click="itemTap" :key="item.order_sn">
	            <view><text>{{item.order_sn}}</text></view>
	            <view>{{item.student_name}}</view>
	            <view>¥{{item.price}}</view>  
	          </view>
	        </scroll-view>
	</view>
</template>

<script>
	import mySelect from "../../../components/select/select.vue"
	
	export default {
		components:{
			mySelect
		},
		data(){
			return {
				scrollViewHeight: 0,
				classes: [{
				  class_id: '1',
				  class_name: '订单号'
				}, {
				  class_id: '2',
				  class_name: '姓名'
				}],
				data1: {
					total:{
						cnt:'',
						money:''
					},
					booking_order:[]
				},
				tableInfo: {
				  lineTitle: '姓名'
				},
				searchValue: {
				  type: 1,
				  value: ''
				},
				option: {},
				paging:{
				  page: 1,
				  pagSize: 20
				}
			}
		},
		onLoad (option) {
		    this.getTableLineTitle(option)
		} ,
		mounted() {
			this.calcScrollViewHeight()
		},
		methods:{
			
			lower(e) {
			    if (this.paging.page < this.data1.total.page_num){
			      this.paging.page ++
			      this.getSaleList()
			    } else{
			      uni.showToast({
			        title: '没有更多了',
			      })
			    }
			  },
		  itemTap(e){
			  var type  = this.option.type
			  var orderSn = e.currentTarget.dataset.sn
			  uni.navigateTo({
				url: '../details/details' + '?type=' + type + '&orderSn=' + orderSn,
			  })
			},
		  
			clickSearch (){
				console.log("clickSearch")
			  
			  this.paging.page = 1
			  this.getSaleList()
			},
		  
			change (item) {
				console.log(item)
				this.searchValue.type = item.id
			},
		  
			calcScrollViewHeight(){
			  //设置scroll-view高度
				let query = uni.createSelectorQuery();
				query.select('.head').boundingClientRect();
				query.exec((rect) => {
					// console.log(rect)
					if(rect.length != 0 && rect[0]!= null){
					let height = this.$store.getters.windowHeight - rect[0].height - 20;
					this.scrollViewHeight = height
					}
				})
			  
			  
			},
		  
			getTableLineTitle(option){
				this.option = option
			  const type = option.type
			  if(type == 1){//零售
				uni.setNavigationBarTitle({
				  title:'零售销售详情'
				})
				this.getSaleList()
			  }else if (type == 2){//预售
				uni.setNavigationBarTitle({
				  title:'预售销售详情'
				})
				this.getSaleList()
			  } 
			},
		  
			getSaleList () {
			  const data = this.getRepData()
			  let promi
			  if(this.option.type == 2){
				  promi = this.$api.getSizeOderDetail(data)
			  }else{
				  promi = this.$api.getRetailOrderDetail(data)
			  }
							
			  promi.then(rep => {
				  let {data} = rep.data
				  if (this.paging.page == 1){
					this.data1 = data
				  }else{
					const orders = this.data1.booking_order;
					const os = orders.concat(data.booking_order)
					this.data1.booking_order = os
				  }
			  })
			},
		  
			getRepData (){
				
			  let data = {
				type: this.searchValue.type,
				key_word: this.searchValue.value ? this.searchValue.value : '',
				page: this.paging.page,
				page_size: this.paging.pagSize,
				time_year:this.option.year,
				is_pay:this.option.ispay
			  }
			  if (this.option.type == 1){
				const schoolId = this.$store.getters.currentSchool.school_id
				data.school_id = schoolId
				data.time_month = this.option.month 
				return data
			  }else{
				data.order_id = this.option.id
				return data
			  }
			},
			
		}
	}
</script>

<style lang="scss">
	page, page > view:nth-child(1){
	  height: 100%;
	  overflow: hidden;
	}
	
	.select-bottom{
	  display: flex;
	  justify-content: center
	}
	.select-wrap {
	  width: 236rpx;
	  height: 72rpx;
	}
	.select-wrap:nth-child(n+2){
	  margin-left: 10rpx;
	}
	.input-bottom{
	  display: flex;
	  justify-content: space-between;
	  margin-top: 10rpx;
	}
	.head{}
	.head-input{
	  border: 1rpx solid #ddd;
	  border-radius: 5rpx;
	  width: 72%;
	  height: 72rpx;
	  padding-left: 8rpx;
	  margin-left: 12rpx;
	  font-size: 14px;
	}
	.head-button{
	  line-height: 72rpx;
	  font-size: 14px;
	  font-weight: 0;
	  padding: 0px;
	}
	
	page > view:nth-child(1){
	  margin-top: 8rpx;
	  margin-left: 8rpx;
	  margin-right: 8rpx;
	}
	
	scroll-view{
	  border-right: 1px solid #ddd;
	  margin-top: 16rpx;
	}
	
	.scroll-view-item{
	  height: 80rpx;
	  display: flex;
	  font-size: 14px;
	}
	
	.scroll-view-item > view:nth-child(1){
	  width: 50%;
	  align-items: center;
	  display: flex;
	  justify-content: center;
	  overflow: hidden;
	  border-bottom: 1px solid #ddd;
	  border-left: 1px solid #ddd;
	}
	
	.scroll-view-item > view:nth-child(1) > text{
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	
	.scroll-view-item > view:nth-child(n+2){
	  width: 25%;
	  align-items: center;
	  display: flex;
	  justify-content: center;
	  border-bottom: 1px solid #ddd;
	  border-left: 1px solid #ddd;
	}
	
	.scroll-view-item > view:nth-child(n+3){
	  border-right: 1px solid #ddd;
	}
	
	.table-total{
	  height: 100rpx;
	  font-size: 16px;
	  font-weight: bold;
	}
	
	.table-total > view:nth-child(1){
	  border-left: none;
	  border-left: 1px solid #ddd;
	  border-top: 1px solid #ddd;
	}
	
	.table-total > view:nth-child(n+2){
	  width: 50%;
	  align-items: center;
	  display: flex;
	  justify-content: center;
	  border-top: 1px solid #ddd;
	  border-left: none !important;
	}
	
	.table-total > view:last-child{
	  border-right: 1px solid #ddd !important;
	}
	
	.table-head{
	  background-color: #e1e1e1;
	  font-size: 14px;
	}

</style>
